<template>
  <div style="width: 97%; margin: 0 auto">
    <el-row :gutter="20" style="padding: 20px">
      <el-col :span="16">
        <el-button @click="addNewList" type="success">新增</el-button>
        <el-button @click="deleteAll" type="danger">批量删除</el-button>
      </el-col>
      <el-col :span="8">
        <div style="margin-top: 15px">
          <el-input
            placeholder="请输入内容"
            v-model="keywordVle"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              v-on:input="searchs"
            ></el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <template>
      <el-table
        :data="list"
        border
        style="width: 100%"
        max-height="550px"
        @sort-change="sortBy"
        @select="selsectAll"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column type="index" width="50" label="#"></el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="200"
        ></el-table-column>
        <el-table-column prop="time" label="用时" width="120"></el-table-column>
        <el-table-column prop="type" label="类型" width="120"></el-table-column>
        <el-table-column
          prop="author"
          label="作者"
          width="100"
        ></el-table-column>
        <el-table-column prop="date" label="时间" sortable></el-table-column>
        <el-table-column fixed="right" label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              type="danger"
              plain
              size="small"
              @click="deleteLists(scope.row.id)"
              >删除</el-button
            >
            <el-button
              type="warning"
              plain
              size="small"
              @click="updateLists(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="primary"
              plain
              size="small"
              @click="look(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 抽屉 -->
    <div class="draw">
      <el-drawer :title="title" :visible.sync="drawer" size="50%">
        <el-form ref="form" :model="{ form }" label-width="80px">
          <el-form-item label="题目">
            <el-input v-model="form.title" :disabled="looks"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select
              v-model="form.cid"
              placeholder="请选择类型"
              :disabled="looks"
            >
              <el-option
                v-for="(v, i) in classifyList"
                :key="i"
                :label="v.name"
                :value="v.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用时">
            <el-select
              v-model="form.time"
              :disabled="looks"
              placeholder="请选择时间"
            >
              <el-option label="一分钟" value="1"></el-option>
              <el-option label="两分钟" value="2"></el-option>
              <el-option label="三分钟" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="作者">
            <el-input disabled v-model="form.author"></el-input>
          </el-form-item>
          <el-form-item :disabled="looks">
            <mavonEditor
              :editable="iseditable"
              :subfield="issubfield"
              :toolbarsFlag="istoolbarsFlag"
              v-model="form.content"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-show="isShow" @click="onSubmit">{{
              btnTxt
            }}</el-button>
            <el-button @click="closeDialog">取消</el-button>
          </el-form-item>
        </el-form>
      </el-drawer>
      <div class="block">
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3, 5, 8, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  layout: "main",
  data() {
    return {
      drawer: false,
      form: {
        author: "situ",
      },
      title: "新增",
      deleteArr: [],
      disabled: true,
      btnTxt: "新增保存",
      keywordVle: "",
      looks: false,
      isShow: true,
      iseditable: false,
      issubfield: false,
      istoolbarsFlag: false,
    };
  },
  async mounted() {
    await this.getlist();
    // console.log(this.lists);
  },
  computed: {
    ...mapState("msbd", [
      "list",
      "classifyList",
      "pageSize",
      "total",
      "currentPage",
    ]),
  },
  methods: {
    ...mapActions("msbd", ["getlist", "addlist", "updatelist", "deletelist"]),
    ...mapMutations("msbd", [
      "SET_PAGE_SIZE",
      "SET_CURRENTPAGE",
      "GET_KEYWORD",
    ]),
    // 新增
    async addNewList(form) {
      this.title = "新增";
      this.btnTxt = "新增保存";
      this.iseditable = true;
      this.issubfield = true;
      this.istoolbarsFlag = true;
      this.drawer = true;
      this.disabled = false;
      this.isShow = true;
      this.looks = false;
      // console.log(this.form);
    },
    // 删除
    deleteLists(id) {
      this.$confirm("你确定删除该文件吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deletelist(id);
        this.getlist();
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },
    // 修改
    updateLists(row) {
      this.title = "修改";
      this.btnTxt = "修改保存";
      this.iseditable = true;
      this.issubfield = true;
      this.istoolbarsFlag = true;
      this.form = { ...row };
      this.disabled = false;
      this.drawer = true;
      this.isShow = true;
      this.looks = false;
    },
    // 批量删
    deleteAll() {
      this.deleteLists(this.row);
      this.getlist();
    },
    // 关闭
    closeDialog() {
      this.drawer = false;
      this.form = { author: "situ" };
    },
    // 搜索
    searchs() {
      console.log(input);
      // if (this.keywordVle.trim() == "") {
      //   this.getlist();
      // } else {
      //   this.GET_KEYWORD(this.keywordVle);
      // }
      this.getlist();
    },
    sortBy(v) {},
    look(row) {
      this.title = "查看";
      this.drawer = true;
      this.form = { ...row };
      this.iseditable = false;
      this.issubfield = false;
      this.istoolbarsFlag = false;
      this.isShow = false;
      this.disabled = true;
      this.looks = true;
    },
    // 每页多少条
    handleSizeChange(val) {
      this.SET_PAGE_SIZE(val);
      this.getlist();
    },
    handleCurrentChange(val) {
      this.SET_CURRENTPAGE(val);
      this.getlist();
    },
    // 确认提交
    async onSubmit() {
      if (this.form.id) {
        await this.updatelist(this.form);
      } else {
        await this.addlist(this.form);
      }
      this.getlist();
      // console.log(this.form);
      this.drawer = false;
      this.form = { author: "situ" };
    },
    // 多选按钮
    selsectAll(row) {
      var arr = [];
      for (var i = 0; i < row.length; i++) {
        arr.push(row[i].id);
      }
      this.row = arr.join(",");
      // console.log(this.row);
    },
  },
  components: {
    mavonEditor,
  },
};
</script>

<style scoped>
.draw >>> .el-drawer {
  overflow-y: auto;
}

.pagination {
  margin-top: 15px;
}
</style>